<!-- eslint-disable vue/html-indent -->
<template>
  <div class="Operation_detail">
    <div class="title">
      <p class="tip">{{ changeList?.faultDecriptSummary ?? '' }}-详情</p>
      <button class="btn" @click="goBack">返回</button>
    </div>
    <div class="details">
      <div class="information">
        <p class="titBox">基本信息</p>
        <div class="essential bottom">
          <div class="faultDecriptSummary">
            {{ changeList?.faultDecriptSummary ?? '' }}
          </div>
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="单号">
              {{ changeList?.faultNo ?? '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件单来源">
              {{
                changeList?.faultSource == '01'
                  ? '手工事件单'
                  : changeList?.faultSource == '02'
                  ? '监控事件单'
                  : changeList?.faultSource == '03'
                  ? '电话银行'
                  : changeList?.faultSource == '04'
                  ? '信用卡'
                  : changeList?.faultSource == '05'
                  ? '电话事件单转'
                  : '--'
              }}
            </el-descriptions-item>
            <el-descriptions-item label="创建机构">
              {{ changeList?.createOrgName ?? '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="报告时间 ">
              {{ changeList.reportTime ? changeList.reportTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="填报人">
              {{ changeList.faultContactName ? changeList.faultContactName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="填报人电话">
              {{ changeList.contactPhone ? changeList.contactPhone : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="发生部门">
              {{ changeList.contactAddress ? changeList.contactAddress : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属系统">
              {{ changeList.sysName ? changeList.sysName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="涉事笔数">
              {{ changeList.involveScount ? changeList.involveScount : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="涉事金额">
              {{ changeList.involveAmount ? changeList.involveAmount : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label=" 事件等级">
              {{
                changeList
                  ? changeList.seriousLev == 1
                    ? '低'
                    : changeList.seriousLev == 2
                    ? '中'
                    : changeList.seriousLev == 3
                    ? '高'
                    : changeList.seriousLev
                  : ''
              }}
            </el-descriptions-item>
            <el-descriptions-item label="交易机构">
              {{ changeList.occurrenceAddress ? changeList.occurrenceAddress : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="交易名称">
              {{ changeList.tradingName ? changeList.tradingName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="流水号">
              {{ changeList.serialNumber ? changeList.serialNumber : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="客户姓名">
              {{ changeList.customerName ? changeList.customerName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="客户身份证号">
              {{ changeList.customerIdcard ? changeList.customerIdcard : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="交易账号">
              {{ changeList.transactionAccount ? changeList.transactionAccount : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="交易金额">
              {{ changeList.transactionAmount ? changeList.transactionAmount : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="订单号">
              {{ changeList.orderNumber ? changeList.orderNumber : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="转全国中心时间">
              {{ changeList.toCenterTime ? changeList.toCenterTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="发生机构">
              {{ changeList.orgName ? changeList.orgName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="工作组">
              {{ changeList.groupName ? changeList.groupName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件标题" span="2">
              {{ changeList.faultDecriptSummary ? changeList.faultDecriptSummary : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="描述" span="2">
              {{ changeList.faultDecriptDetail ? changeList.faultDecriptDetail : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="是否紧急">
              {{ changeList.ifJj == 1 ? '是' : changeList.ifJj == 2 ? '否' : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              {{
                changeList.status == '03' ? '待领取' : changeList.status == '04' ? '处理中' : '--'
              }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="information" v-if="false">
        <p class="titBox">基本信息</p>
        <div class="essential bottom">
          <div class="faultDecriptSummary"> 不知道是什么 </div>
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="单号"> 单号 </el-descriptions-item>
            <el-descriptions-item label="事件单来源"> 手工事件单 </el-descriptions-item>
            <el-descriptions-item label="创建机构"> 创建机构 </el-descriptions-item>
            <el-descriptions-item label="报告时间 "> 报告时间 </el-descriptions-item>
            <el-descriptions-item label="填报人"> 填报人 </el-descriptions-item>
            <el-descriptions-item label="填报人电话"> 填报电话 </el-descriptions-item>
            <el-descriptions-item label="发生部门"> 发生部门 </el-descriptions-item>
            <el-descriptions-item label="所属系统"> 所属系统 </el-descriptions-item>
            <el-descriptions-item label="涉事笔数"> 涉事笔数 </el-descriptions-item>
            <el-descriptions-item label="涉事金额"> 涉事金额 </el-descriptions-item>
            <el-descriptions-item label=" 事件等级"> 高中低 </el-descriptions-item>
            <el-descriptions-item label="交易机构">交易机构 </el-descriptions-item>
            <el-descriptions-item label="交易名称">交际名称 </el-descriptions-item>
            <el-descriptions-item label="流水号">流水号 </el-descriptions-item>
            <el-descriptions-item label="客户姓名">客户姓名 </el-descriptions-item>
            <el-descriptions-item label="客户身份证号">客户身份证号 </el-descriptions-item>
            <el-descriptions-item label="交易账号">交易账号 </el-descriptions-item>
            <el-descriptions-item label="交易金额">交易金额 </el-descriptions-item>
            <el-descriptions-item label="订单号">订单号 </el-descriptions-item>
            <el-descriptions-item label="转全国中心时间">时间 </el-descriptions-item>
            <el-descriptions-item label="发生机构">发生机构 </el-descriptions-item>
            <el-descriptions-item label="工作组">工作组 </el-descriptions-item>
            <el-descriptions-item label="事件标题" span="2">时间标题 </el-descriptions-item>
            <el-descriptions-item label="描述" span="2">描述 </el-descriptions-item>
            <el-descriptions-item label="是否紧急">是否紧急 </el-descriptions-item>
            <el-descriptions-item label="状态"> 待领取处理中 </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="technological">
        <p class="titBox">流程记录</p>
        <div class="block">
          <!--  v-if="show" activities-->
          <el-timeline>
            <div class="timeout" v-if="tips ? true : false">
              {{ tips }}:{{ changeList.timeOut ? changeList.timeOut : '' }}</div
            >
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              type="primary"
              size="large"
              :timestamp="activity.performerTime"
              placement="top"
              :reverse="true"
              color="#007AF5 "
            >
              <el-card class="box-card">
                <div class="text">
                  <span>任务名称</span>
                  <span class="item">{{ activity.taskName }}</span>
                </div>
                <div class="text">
                  <span>操作名称</span>
                  <span class="item">{{ activity.performName }}</span>
                </div>
                <div class="text">
                  <span>处理意见</span>
                  <span class="item">
                    {{ activity.performDesc }}
                  </span>
                </div>
                <div class="text">
                  <span>处理人</span>
                  <span class="item">{{ activity.performerName }}</span>
                </div>
                <div class="text">
                  <span>值班电话</span>
                  <span class="item">{{ activity.performerTel }}</span>
                </div>
                <div class="text">
                  <span>下一步名称</span>
                  <span class="item">{{ activity.nextTaskName }}</span>
                </div>
                <div class="text">
                  <span>下一步操作</span>
                  <span class="item">{{ activity.nextPerformerDesc }}</span>
                </div>
                <div class="text">
                  <span>操作时间</span>
                  <span class="item">{{ activity.performerTime }}</span>
                </div>
              </el-card>
            </el-timeline-item>

            <el-timeline-item
              type="primary"
              size="large"
              placement="top"
              color="#007AF5 "
              v-if="false"
            >
              <el-card class="box-card">
                <div class="text">
                  <span>任务名称</span>
                  <span class="item">名称</span>
                </div>
                <div class="text">
                  <span>操作名称</span>
                  <span class="item">操作名称</span>
                </div>
                <div class="text">
                  <span>处理意见</span>
                  <span class="item"> 处理意见 </span>
                </div>
                <div class="text">
                  <span>处理人</span>
                  <span class="item">处理人</span>
                </div>
                <div class="text">
                  <span>值班电话</span>
                  <span class="item">值班人</span>
                </div>
                <div class="text">
                  <span>下一步名称</span>
                  <span class="item">下一步</span>
                </div>
                <div class="text">
                  <span>下一步操作</span>
                  <span class="item">下一步操作</span>
                </div>
                <div class="text">
                  <span>操作时间</span>
                  <span class="item">操作时间</span>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-empty description="暂无流程" v-if="!show"></el-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted, reactive } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { pubflowlist, selectFmBizMonitorById } from '@/http/api/operation';
  const route = useRoute();
  const router = useRouter();
  const activities = reactive([]);
  const changeCode = ref(router.options.history.state.back.split('/')[1]);
  const changeList = ref('');
  const orgId = ref(route.params.value);
  const type = ref(route.params.type);
  const typeNum = ref(route.params.typeNum);
  const show = ref(true);
  const fmId = ref(route.params.fmId);
  const exceptionType = ref('');
  const tips = ref('');
  const pageNum = ref('1');
  const pageSize = ref('20');
  const total = ref('');
  onMounted(() => {
    switch (type.value) {
      case '1':
        exceptionType.value = '1';
        tips.value = '领取超时';
        break;
      case '2':
        exceptionType.value = '2';
        tips.value = '紧急超时';
        break;
      case '3':
        exceptionType.value = '3';
        tips.value = '疑难超时';
        break;
      case '4':
        exceptionType.value = '4';
        tips.value = '关联超时';
        break;
      case '5':
        exceptionType.value = '5';
        tips.value = '数据变更超时';
        break;
      case '10':
        exceptionType.value = '10';
        tips.value = '处理超时';
        break;
      case '11':
        exceptionType.value = '11';
        tips.value = '转三线处理超时';
        break;
    }
    selectFmBizMonitorById_list();
    pubflow_list();
  });
  const pubflow_list = () => {
    pubflowlist({
      pageSize: pageSize.value,
      pageNum: pageNum.value,
      bizId: fmId.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      activities.length = 0;
      (activities as any).push(...res.data.data.rows);
      total.value = res.data.data.total;
      if (!total.value) {
        show.value = false;
      }
    });
  };
  const goBack = () => {
    //  router.go(-1);
    switch (changeCode.value) {
      case 'current_processing':
        router.push({
          name: changeCode.value,
          params: {
            type: typeNum.value,
            value: orgId.value
          }
        });
        break;
      case 'CurrentProcessList':
        {
          router.push({
            name: changeCode.value,
            params: {
              type: type.value
            }
          });
        }
        break;
      case 'Operation_list':
        {
          router.push({
            name: changeCode.value,
            params: {
              type: type.value
            }
          });
        }
        break;
    }
    // router.push({
    //   name: changeCode.value,
    //   params: {
    //     type: type.value,
    //     value: orgId.value
    //   }
    // });
  };
  const selectFmBizMonitorById_list = () => {
    selectFmBizMonitorById({
      fmId: fmId.value,
      exceptionType: exceptionType.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.value = res.data.data;
    });
  };
</script>
<style scoped lang="less">
  .Operation_detail {
    width: 100%;
    min-height: 100vh;
    // background: rgb(84, 84, 95);
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      height: 34px;
      margin-bottom: 12px;
      .tip {
        line-height: 34px;
        font-size: 14px;
        font-weight: 400;
        color: #46545d;
      }
      .btn {
        width: 80px;
        height: 34px;
        background: #007af5;
        border-radius: 2px;
        color: #fff;
        font-size: 12px;
        border: 0;
      }
    }
    .details {
      display: flex;
      justify-content: space-between;
      .information {
        width: 60%;
        // margin: auto;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }

        .essential {
          // margin-bottom: 40px;
          padding: 20px;
          background: #fff;
          border-radius: 6px;
          .faultDecriptSummary {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #46545d;
            margin-bottom: 20px;
          }
          .el-descriptions {
            :deep(.is-bordered) {
              //border-collapse: separate;
              tbody {
                margin-bottom: 3px;

                .el-descriptions-row {
                  // :deep().el-descriptions-item__label:not(.is-bordered-label) {
                  // }
                  .el-descriptions-item__cell {
                    &.el-descriptions-item__label {
                      background: #fafafa !important;
                      padding: 10px 10px 0;
                      border: 3px solid #fafafa;
                      border-bottom: none;
                      border-right: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #929ea8;
                    }
                    &.el-descriptions-item__content {
                      background: #fafafa !important;
                      padding: 5px 10px;
                      border-left: 3px solid #fafafa;
                      border-top: none;
                      border-right: 3px solid #fff;
                      border-bottom: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #46545d;
                    }
                  }
                  :deep(.el-descriptions-item__label) {
                    //margin-right: 3px;
                    background: #fafafa !important;
                    padding: 10px 10px 0;
                  }
                }
              }
            }
          }
        }
      }
      .technological {
        width: 35%;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }
        .el-divider {
          .el-divider__text {
            font-size: 16px;
            line-height: 35px;
          }
        }
        .block {
          .el-timeline {
            width: 80%;
            margin: 0 auto;
            .timeout {
              margin-bottom: 10px;
              font-size: 14px;
              font-weight: 400;
              color: #46545d;
            }
            .el-timeline-item__tail {
              //width: 1px;

              border: 1px solid #007af5;
            }
            :deep(.el-timeline-item__timestamp) {
              font-size: 14px;
              font-weight: 400;
              color: #46545d;
            }
            :deep(.el-timeline-item__content) {
              color: #fff;
              .box-card {
                border-radius: 10px;
                .el-card__body {
                  .text {
                    min-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    font-weight: 400;
                    color: #929ea8;
                    .item {
                      max-width: 70%;
                      color: #46545d;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
